<template>
  <div class="app-container">

    <div class="app-container-box">
      <div class="wait">
        <div class="wait-title">
          <div class="blocks"></div>
          <span>待办</span>
        </div>
        <div class="wait-title-win">
          <div class="win-one">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #3A8EE6;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>调拨需求</span>
            </div>
            <div class="win-data">
              <span style="font-size: 12px;font-weight: bold;color: #3A8EE6;margin-left: 10px;">300</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">1</span>
              <span style="font-size: 12px;font-weight: bold;color: #3A8EE6;margin-left: 10px;">调拨总数</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">待办数量</span>
              <div class="shu"></div>
            </div>
          </div>
          <div class="win-two">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #F2A200;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>内部售卖</span>
            </div>
            <div class="win-data">
              <span style="font-size: 12px;font-weight: bold;color: #F2A200;margin-left: 10px;">300</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">1</span>
              <span style="font-size: 12px;font-weight: bold;color: #F2A200;margin-left: 10px;">售卖总数</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">待办数量</span>
              <div class="shu"></div>
            </div>
          </div>
          <div class="win-three">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #E55C17;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>资产租赁</span>
            </div>
            <div class="win-data">
              <span style="font-size: 12px;font-weight: bold;color: #E55C17;margin-left: 10px;">300</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">1</span>
              <span style="font-size: 12px;font-weight: bold;color: #E55C17;margin-left: 10px;">租赁总数</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">待办数量</span>
              <div class="shu"></div>
            </div>
          </div>
          <div class="win-four">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #17E5BA;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>租赁到期</span>
            </div>
            <div class="win-data">
              <span style="font-size: 12px;font-weight: bold;color: #17E5BA;margin-left: 10px;">300</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">1</span>
              <span style="font-size: 12px;font-weight: bold;color: #17E5BA;margin-left: 10px;">到位总数</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">待办数量</span>
              <div class="shu"></div>
            </div>
          </div>
          <div class="win-five">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #4242E7;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>保修到期</span>
            </div>
            <div class="win-data">
              <span style="font-size: 12px;font-weight: bold;color: #4242E7;margin-left: 10px;">300</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">1</span>
              <span style="font-size: 12px;font-weight: bold;color: #4242E7;margin-left: 10px;">保修总数</span>
              <span style="font-size: 12px;font-weight: bold;color: #181818;margin-left: 10px;">待办数量</span>
              <div class="shu"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="Statistics">
        <div class="Statistics-title">
          <div class="blocks"></div>
          <span>资产统计</span>
        </div>
        <div class="wait-title-win">
          <div class="win-one">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #3A8EE6;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>资产总数</span>
            </div>
            <div class="win-data">
              <span style="font-size: 14px;font-weight: bold;color: #3A8EE6;margin-left: 10px;">19010</span>
            </div>
          </div>
          <div class="win-two">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #F2A200;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>在用资产</span>
            </div>
            <div class="win-data">
              <span style="font-size: 14px;font-weight: bold;color: #F2A200;margin-left: 10px;">19000</span>
            </div>
          </div>
          <div class="win-three">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #E55C17;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>闲置资产</span>
            </div>
            <div class="win-data">
              <span style="font-size: 14px;font-weight: bold;color: #E55C17;margin-left: 10px;">1401</span>
            </div>
          </div>
          <div class="win-four">
            <div class="win-title">
              <div
                style="width: 25px;height: 25px;margin-left: 5px; border-radius: 100%;background-color: #17E5BA;display: flex; justify-content: center;align-items: center;">
                <img src="@/assets/images/tu1.png" alt="">
              </div>
              <span>处置资产</span>
            </div>
            <div class="win-data">
              <span style="font-size: 14px;font-weight: bold;color: #17E5BA;margin-left: 10px;">190</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
        <div class="list-title ">
          <div class="blocks"></div>
          <span>资产台账列表</span>
        </div>
        <div class="list-n">
          <div class="list-left">
            <el-input v-model="input" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <div class="list-right">
            <div class="list-right-top">
              <span>资产编号</span>
              <el-input v-model="input" placeholder="请输入内容" suffix-icon="el-icon-search" style="width: 200px;margin-left: 15px;"></el-input>
              <span>资产组织</span>
              <el-select v-model="value" placeholder="请选择" style="width: 200px;margin-left: 15px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span>设备状态</span>
              <el-select v-model="value" placeholder="请选择" style="width: 200px;margin-left: 15px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button style="background-color: #165DFF;color: white;border: none;margin-left: 8px;">搜索</el-button>
              <el-button>重置</el-button>
              <span style="color: #165DFF;margin-left: 10px;cursor: pointer;">高级搜索&nbsp;</span>
              <i class="el-icon-arrow-down" style="color: #165DFF;cursor: pointer;"></i>
            </div>
            <div class="list-right-center">
              <el-button style="background-color: #165DFF;color: white;border: none;margin-left: 15px;height: 30px;">搜索</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">租出</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">变更</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">归还</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">报废</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">维修</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">赠送</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">导入</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">导出</el-button>
              <el-button style="background-color: #F7F8FA;color: #86909C;border: none;margin-left: 15px;height: 30px;">打印二维码</el-button>
            </div>
            <el-table :data="tableData" style="width: 98%;font-size: 12px;" height="200" size="mini">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>

                <el-table-column prop="date" label="商业保单编号" width="120">
                </el-table-column>
                <el-table-column prop="name" label="商业险承保单位" width="120">
                </el-table-column>
                <el-table-column prop="address" label="有效期终止时间" width="120">
                </el-table-column>
                <el-table-column prop="address" label="商业险保费合计(元)">
                </el-table-column>
                <el-table-column prop="address" label="三者险赔额(万)">
                </el-table-column>
                <el-table-column prop="address" label="三者险保费(元)">
                </el-table-column>
                <el-table-column prop="address" label="车上人员险司机赔额(万元)">
                </el-table-column>
                <el-table-column prop="address" label="司机保费(元)">
                </el-table-column>
                <el-table-column prop="address" label="车上人员险乘客赔额(万元)">
                </el-table-column>
                <el-table-column prop="address" label="驾乘险投保座位数">
                </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="4"
              background
              style="float: right;margin-top: 10px;"
              layout="total, prev, pager, next, jumper"
              :total="400">
            </el-pagination>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'RealCard',
    data() {
      return {
        input: '',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙'
        }],
        currentPage: 4
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
  }
</script>
<style lang="scss" scoped>
.app-container {

  .app-container-box {
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    .wait {
      width: 950px;

      .wait-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: repeat(2, 20px 1fr);
        align-items: center;

        .blocks {
          background-color: #165dff;
          height: 14px;
          width: 4px;
          border-radius: 0px 3px 3px 0px;
        }

        span {
          color: #181818;
          font-size: 14px;
          font-weight: bold;
        }
      }

      .wait-title-win {
        width: 100%;
        height: 150px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        justify-items: center;

        .win-one {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #a7d3ff;
          background-color: #F2F9FF;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 80px 80px;
            grid-template-rows: repeat(2 1fr);
            position: relative;

            .shu {
              width: 2px;
              height: 30px;
              background-color: #EAEBEF;
              position: absolute;
              top: 5px;
              left: 82px;
            }
          }
        }

        .win-two {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #ffe1a6;
          background-color: #FFFBF2;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 80px 80px;
            grid-template-rows: repeat(2 1fr);
            position: relative;

            .shu {
              width: 2px;
              height: 30px;
              background-color: #EAEBEF;
              position: absolute;
              top: 5px;
              left: 82px;
            }
          }
        }

        .win-three {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #ffc5ad;
          background-color: #FFF6F2;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 80px 80px;
            grid-template-rows: repeat(2 1fr);
            position: relative;

            .shu {
              width: 2px;
              height: 30px;
              background-color: #EAEBEF;
              position: absolute;
              top: 5px;
              left: 82px;
            }
          }
        }

        .win-four {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #89ecfc;
          background-color: #F2FFFE;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 80px 80px;
            grid-template-rows: repeat(2 1fr);
            position: relative;

            .shu {
              width: 2px;
              height: 30px;
              background-color: #EAEBEF;
              position: absolute;
              top: 5px;
              left: 82px;
            }
          }
        }

        .win-five {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #a7b3ff;
          background-color: #F2F2FF;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 80px 80px;
            grid-template-rows: repeat(2 1fr);
            position: relative;

            .shu {
              width: 2px;
              height: 30px;
              background-color: #EAEBEF;
              position: absolute;
              top: 5px;
              left: 82px;
            }
          }
        }
      }
    }

    .Statistics {
      width: 300px;
      flex-grow: 1;

      .Statistics-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: repeat(2, 20px 1fr);
        align-items: center;

        .blocks {
          background-color: #165dff;
          height: 14px;
          width: 4px;
          border-radius: 0px 3px 3px 0px;
        }

        span {
          color: #181818;
          font-size: 14px;
          font-weight: bold;
        }
      }

      .wait-title-win {
        width: 100%;
        height: 150px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
        justify-items: center;

        .win-one {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #a7d3ff;
          background-color: #F2F9FF;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
          }
        }

        .win-two {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #ffecc6;
          background-color: #FFFBF2;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
          }
        }

        .win-three {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #ffc5ad;
          background-color: #FFF6F2;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
          }
        }

        .win-four {
          width: 170px;
          height: 100px;
          border-radius: 5px;
          border: 1px solid #89ecfc;
          background-color: #F2FFFE;

          .win-title {
            width: 100%;
            height: 50px;
            display: grid;
            grid-template-columns: 50px 1fr;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: bold;
            }
          }

          .win-data {
            width: 100%;
            height: 50px;
          }
        }
      }
    }
  }

  .list {
      width: 100%;
      .list-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: repeat(2, 20px 1fr);
        align-items: center;
        .blocks {
          background-color: #165dff;
          height: 14px;
          width: 4px;
          border-radius: 0px 3px 3px 0px;
        }
        span {
          color: #181818;
          font-size: 14px;
          font-weight: bold;
        }
      }
        .list-n{
          width: 100%;
          display: flex;
          .list-left{
          width: 300px;
        }
        .list-right{
          width: 1350px;
          .list-right-top{
            width: 100%;
            height: 36px;
            display: flex;
            align-items: center;
            span{
              font-size: 12px;
              margin-left: 30px;
              color: #4E5969;
            }
          }
          .list-right-center{
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
          }
        }
      }

    }
}
</style>
